﻿@using FineAdmin.Model;
@{
    Layout = null;
    var MaterialNav = ViewBag.MaterialNav as List<MaterialModel>;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>@ViewBag.Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.3.0/style/weui.min.css" rel="stylesheet">
    <link href="~/Content/css/weuix.css" rel="stylesheet" />
    <link href="~/Content/huiji.css" rel="stylesheet" />
    <style>
        .items {
            position: absolute;
            overflow-x: hidden;
            overflow-y: scroll;
           /* white-space: nowrap;*/
            height: 100%;
            width: 100%;
        }
        .demo {
            border-radius: 6px;
            overflow: hidden;
            font-size: 0.8rem;
        }

        .demo-image {
            display: inline-block;
            width: 100%;
            max-width: 100%;
            max-height: 260px;
            margin-bottom: .1em;
        }

        .demo-item {
            position: relative;
            float: left;
            padding: 2px 2px 2px 2px;
            width: 49.99%;
            box-sizing: border-box;
        }

    </style>
</head>
<body>
    <div class="container page-bg" ontouchstart>
        <div id="main">

            <div id="tagnav" class="weui-navigator weui-navigator-wrapper" style="position: fixed; top: 0px;">
                <ul class="weui-navigator-list">

                    @foreach (var item in MaterialNav)
                    {
                        <li><a href="javascript:;" class="tagnav" data-page="0" data-id="@item.Id" data-index="@(MaterialNav.IndexOf(item))">@item.ShortName</a></li>
                    }

                </ul>
            </div>

            <div style="margin-top:40px;height:100%;" id="items-list">
                @foreach (var item in MaterialNav)
                {
                    <div class="items" style="display:none;">
                       
                    </div>
                }
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/zepto/1.2.0/zepto.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.1/lib/template-web.min.js"></script>
    <script src="~/Scripts/zepto.weui.js"></script>
    <script src="~/Scripts/iscroll-lite.js"></script>
  
    <script type="text/html" id="tpl">
        {{each data  val key }}
        <div class="demo demo-item" data-id="{{val.Id}}">
            <div style="position:relative;text-align: center;color: #fff;">
                <img src="{{val.PictUrl}}" class="demo-image">
                <div style="position: absolute;
        right: 0px;
        background-color: rgba(255, 0, 0, 0.58);
        z-index: auto;
        top: 4px;
        right: 4px;
        border: 1px dashed;
        border-color: #ffcc00;">
                    <p style=" font-size: 10px; font-weight: 900;">
                        {{if(val.UserType==1)}}
                        天猫领券
                        {{else}}
                        淘宝领券
                        {{/if}}
                    </p>
                    <span style="font-weight: bold;">{{val.CouponAmount}}</span>
                </div>
            </div>




            <div>
                <div 
                     style="word-wrap: break-word;
        width: 100%;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
"
                     >
                    {{if(val.UserType==1)}}
                    <p style="color:white;background-color:red;display:inline-flex; border-radius:4px;padding: 0px 6px 0px 6px;">天猫</p>
                    {{else}}
                    <p style="color:white;background-color:#fd4600;display:inline-flex; border-radius:4px;padding: 0px 6px 0px 6px;">淘宝</p>
                    {{/if}}
                    {{val.Title}}
                </div>

                <div>
                    <span style="color: #a8a8a8; font-size:0.66rem;">券后</span>
                    <span style="color: #fe3738;">¥</span>
                    <span style="color: #fe3738;font-size: 1.2rem;">{{val.CouponAfterPrice}}</span>
                </div>

                <div style="font-size: .66rem; color: #888; margin-top: .12rem;white-space: nowrap;">
                    <span>{{val.Nick}}</span>
                    <span>| 30日销量{{val.Volume}}</span>
                </div>

            </div>
        </div>
        {{/each}}
    </script>
    <script>

       

        var TagNavIndex = 0;

        $(document).on('tap click', ".tagnav", function () {

            var navindex = $(this).data('index');

            TagNavIndex = navindex;

            $(".items").eq(navindex).show().siblings().hide();

            var page = $(".tagnav").eq(TagNavIndex).data("page");

            if (page == 0) {
                page++;
                $(".tagnav").eq(TagNavIndex).data("page", page);
                ajaxpage(page, $(".tagnav").eq(TagNavIndex).data("id"));
            }

        });

        const goto = (id) => {
            sessionStorage.setItem('subjec_list', $("#items-list").html());//存储列表数据
            sessionStorage.setItem('subjec_tagnavindex', TagNavIndex);//存储index
            //sessionStorage.setItem('nine_key', key);//存储key
            //sessionStorage.setItem('nine_maxpage', maxpage);//存储maxpage
            sessionStorage.setItem('subjec_scroll', $(".items").eq(TagNavIndex).scrollTop());//存储滚动条位置
            location.href = "GoodsDetails?Id=" + id;
        }

        //$("#items-list").on('tap click', ".demo-item", function () {

        //    id = $(this).data('id');

        //    goto(id);

        //});

        function bindTouch() {
            var aNodes = document.querySelectorAll(".demo-item");
            for (var i = 0; i < aNodes.length; i++) {
                aNodes[i].addEventListener("touchstart", function () {
                    this.isMoved = false;
                })
                aNodes[i].addEventListener("touchmove", function () {
                    this.isMoved = true;
                })
                aNodes[i].addEventListener("touchend", function () {
                    //如果误触了，isMoved为true，不会执行跳转
                    if (!this.isMoved) {
                        id = $(this).data('id');
                        goto(id);
                    }
                })
            }
        }


        function ajaxpage(page, mid) {
            $.showLoading();
            $.ajax({
                type: "POST",
                url: '../Mobile/AjaxMaterialGoods',
                data: { "page": page, "limit": 15, Mid: mid },
                dataType: "json",
                beforeSend: function () {

                },
                success: function (rs) {

                    console.log(rs);

                    var html = template('tpl', rs);

                    $(".items").eq(TagNavIndex).append(html);

                   

                    $.hideLoading();

                    bindTouch();

                },
                timeout: 15000
            });
        }

        
       

        

        $(function () {

            var l = sessionStorage.getItem('subjec_list', $("#items-list").html());//存储列表数据
            if (null !== l && '' !== l) {
                TagNavIndex = sessionStorage.getItem('subjec_tagnavindex');

                $("#items-list").html(l);
                bindTouch();

                $(".items").eq(TagNavIndex).scrollTop(sessionStorage.getItem('subjec_scroll'));

                sessionStorage.removeItem('subjec_list');
                sessionStorage.removeItem('subjec_tagnavindex');
                sessionStorage.removeItem('subjec_scroll');

            } else {

               

                $(".items").eq(TagNavIndex).show();

                ajaxpage(1, $(".tagnav").eq(TagNavIndex).data("id"));
                var page = $(".tagnav").eq(TagNavIndex).data("page");
                page++;
                $(".tagnav").eq(TagNavIndex).data("page", page);

            }

            TagNav('#tagnav', {
                type: 'scrollToNext',
                curClassName: 'weui-state-active',
                index: TagNavIndex
            });

            $(".items").scroll(
                function () {
                    var scrollTop = $(this).scrollTop();//方法设置或返回被选元素的垂直滚动条位置

                    var scrollHeight = $(".items").eq(TagNavIndex).scrollHeight();//页面的高
                    var windowHeight = $(window).height();//可视窗口高
                    console.log(scrollTop + "," + scrollHeight + "," + windowHeight);
                    if (scrollTop + windowHeight >= scrollHeight) {
                        console.log(666);
                        var page = $(".tagnav").eq(TagNavIndex).data("page");
                        page++;
                        $(".tagnav").eq(TagNavIndex).data("page", page);

                        ajaxpage(page, $(".tagnav").eq(TagNavIndex).data("id"));

                    }
                });
        })
    </script>
</body>
</html>
